"use client"

import { LanguageSwitcher, useLocale } from "@/components/language-switcher"
import { Card, CardDescription, CardTitle } from "@/components/ui/card"
import Image from "next/image"
import { Lightbulb, Zap, DollarSign, Users, Briefcase, Sun, CheckCircle, Wallet, Home } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { useState } from "react"
import { messages } from "@/lib/i18n"

export default function Component() {
  const { t, locale } = useLocale()

  // Safely pull structured data; fall back to empty arrays if undefined
  const localeMessages = messages[locale] ?? messages.zh
  const cases = localeMessages.caseStudies?.cases ?? []
  const partners = localeMessages.partners?.list ?? []
  const historyMilestones = localeMessages.history?.milestones ?? []
  const installationSteps = localeMessages.installationProcess?.steps ?? []
  const financingOptions = localeMessages.financing?.options ?? []
  const warrantyDetails = localeMessages.warrantySupport?.details ?? []
  const howItWorksSteps = localeMessages.howItWorks?.steps ?? []

  const [monthlyBillInput, setMonthlyBillInput] = useState("")
  const [annualSavings, setAnnualSavings] = useState<number | null>(null)
  const [error, setError] = useState<string | null>(null)

  const handleCalculateSavings = () => {
    const bill = Number.parseFloat(monthlyBillInput)
    if (isNaN(bill) || bill <= 0) {
      setError(t("savingsCalculator.invalidInput"))
      setAnnualSavings(null)
      return
    }
    setError(null)
    // Simple estimation: assume 70% of monthly bill can be saved annually
    // This is a placeholder, a real calculator would be more complex
    const estimatedAnnualSavings = bill * 12 * 0.7
    setAnnualSavings(estimatedAnnualSavings)
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-800 text-gray-900 dark:text-gray-50">
      <header className="container mx-auto px-4 py-6 flex justify-between items-center">
        <h1 className="text-2xl font-bold text-blue-600 dark:text-blue-400">{t("header.title")}</h1>
        <LanguageSwitcher />
      </header>

      <main>
        {/* Hero Section */}
        <section className="relative w-full h-[400px] md:h-[500px] lg:h-[600px] flex items-center justify-center text-center overflow-hidden">
          <Image
            src="/placeholder.svg?height=800&width=1200"
            alt={t("hero.imageAlt")}
            layout="fill"
            objectFit="cover"
            className="absolute inset-0 z-0 opacity-70"
          />
          <div className="relative z-10 bg-white/70 dark:bg-gray-900/70 p-6 md:p-10 rounded-lg max-w-3xl mx-4 shadow-lg">
            <h2 className="text-3xl md:text-5xl font-extrabold text-blue-800 dark:text-blue-200 mb-4 leading-tight">
              {t("hero.title")}
            </h2>
            <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300">{t("hero.description")}</p>
          </div>
        </section>

        {/* Benefits Section */}
        <section className="container mx-auto px-4 py-12 md:py-20">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("benefits.title")}
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="flex flex-col items-center text-center p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
              <Lightbulb className="h-12 w-12 text-yellow-500 mb-4" />
              <CardTitle className="text-xl font-semibold mb-2">{t("benefits.energySaving.title")}</CardTitle>
              <CardDescription>{t("benefits.energySaving.description")}</CardDescription>
            </Card>
            <Card className="flex flex-col items-center text-center p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
              <DollarSign className="h-12 w-12 text-green-500 mb-4" />
              <CardTitle className="text-xl font-semibold mb-2">{t("benefits.costSaving.title")}</CardTitle>
              <CardDescription>{t("benefits.costSaving.description")}</CardDescription>
            </Card>
            <Card className="flex flex-col items-center text-center p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
              <Zap className="h-12 w-12 text-blue-500 mb-4" />
              <CardTitle className="text-xl font-semibold mb-2">{t("benefits.sustainability.title")}</CardTitle>
              <CardDescription>{t("benefits.sustainability.description")}</CardDescription>
            </Card>
            <Card className="flex flex-col items-center text-center p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
              <Sun className="h-12 w-12 text-orange-500 mb-4" />
              <CardTitle className="text-xl font-semibold mb-2">{t("benefits.independence.title")}</CardTitle>
              <CardDescription>{t("benefits.independence.description")}</CardDescription>
            </Card>
            <Card className="flex flex-col items-center text-center p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
              <Home className="h-12 w-12 text-teal-500 mb-4" /> {/* Using Home icon for property value */}
              <CardTitle className="text-xl font-semibold mb-2">{t("benefits.propertyValue.title")}</CardTitle>
              <CardDescription>{t("benefits.propertyValue.description")}</CardDescription>
            </Card>
          </div>
        </section>

        {/* How Solar Works Section */}
        <section className="container mx-auto px-4 py-12 md:py-20 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-inner">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("howItWorks.title")}
          </h3>
          <p className="text-base md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto text-center mb-8">
            {t("howItWorks.description")}
          </p>
          <div className="flex flex-col md:flex-row items-center justify-center gap-8">
            <div className="md:w-1/2">
              <Image
                src="/placeholder.svg?height=400&width=600"
                alt={t("howItWorks.diagramAlt")}
                width={600}
                height={400}
                className="rounded-lg shadow-md"
              />
            </div>
            <ul className="md:w-1/2 space-y-4 text-lg text-gray-700 dark:text-gray-300 list-disc list-inside">
              {howItWorksSteps.map((step: string, index: number) => (
                <li key={index}>{step}</li>
              ))}
            </ul>
          </div>
        </section>

        {/* Installation Process Section */}
        <section className="container mx-auto px-4 py-12 md:py-20">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("installationProcess.title")}
          </h3>
          <p className="text-base md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto text-center mb-10">
            {t("installationProcess.description")}
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {installationSteps.map((step: any, index: number) => (
              <Card
                key={index}
                className="flex flex-col items-center text-center p-6 shadow-lg hover:shadow-xl transition-shadow duration-300"
              >
                <div className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-4">{index + 1}</div>
                <CardTitle className="text-xl font-semibold mb-2">{step.title}</CardTitle>
                <CardDescription>{step.description}</CardDescription>
              </Card>
            ))}
          </div>
        </section>

        {/* Financing Options Section */}
        <section className="container mx-auto px-4 py-12 md:py-20 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-inner">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("financing.title")}
          </h3>
          <p className="text-base md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto text-center mb-10">
            {t("financing.description")}
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {financingOptions.map((option: any, index: number) => (
              <Card key={index} className="p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                <Wallet className="h-10 w-10 text-indigo-500 mb-4" />
                <CardTitle className="text-xl font-semibold mb-2">{option.title}</CardTitle>
                <CardDescription>{option.description}</CardDescription>
              </Card>
            ))}
          </div>
        </section>

        {/* Warranty & Support Section */}
        <section className="container mx-auto px-4 py-12 md:py-20">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("warrantySupport.title")}
          </h3>
          <p className="text-base md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto text-center mb-10">
            {t("warrantySupport.description")}
          </p>
          <ul className="max-w-3xl mx-auto space-y-4 text-lg text-gray-700 dark:text-gray-300 list-none">
            {warrantyDetails.map((detail: string, index: number) => (
              <li key={index} className="flex items-start">
                <CheckCircle className="h-6 w-6 text-green-500 mr-3 flex-shrink-0" />
                <span>{detail}</span>
              </li>
            ))}
          </ul>
        </section>

        {/* Project Summary Section */}
        <section className="container mx-auto px-4 py-12 md:py-20 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-inner">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("summary.title")}
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl mx-auto text-center">
            <Card className="p-6 flex flex-col items-center justify-center shadow-lg">
              <Users className="h-12 w-12 text-purple-500 mb-4" />
              <CardTitle className="text-4xl font-bold text-purple-600 dark:text-purple-400">
                {t("summary.projectsCount")}
              </CardTitle>
              <CardDescription className="text-lg">{t("summary.projectsCompleted")}</CardDescription>
            </Card>
            <Card className="p-6 flex flex-col items-center justify-center shadow-lg">
              <Briefcase className="h-12 w-12 text-orange-500 mb-4" />
              <CardTitle className="text-4xl font-bold text-orange-600 dark:text-orange-400">
                {t("summary.partnersCount")}
              </CardTitle>
              <CardDescription className="text-lg">{t("summary.partnerships")}</CardDescription>
            </Card>
          </div>
        </section>

        {/* Case Studies Section */}
        <section className="container mx-auto px-4 py-12 md:py-20">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("caseStudies.title")}
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {cases.map((caseItem: any, index: number) => (
              <Card key={index} className="flex flex-col shadow-lg hover:shadow-xl transition-shadow duration-300">
                <Image
                  src={caseItem.image || "/placeholder.svg"}
                  alt={caseItem.name}
                  width={600}
                  height={400}
                  className="rounded-t-lg object-cover w-full h-48"
                />
                <div className="p-6">
                  <CardTitle className="text-xl font-semibold mb-2">{caseItem.name}</CardTitle>
                  <CardDescription className="mb-2">{caseItem.location}</CardDescription>
                  <p className="text-gray-700 dark:text-gray-300 text-sm mb-4">{caseItem.description}</p>
                  <p className="text-blue-600 dark:text-blue-400 font-bold">{caseItem.savings}</p>
                </div>
              </Card>
            ))}
          </div>
        </section>

        {/* Our Partners Section */}
        <section className="container mx-auto px-4 py-12 md:py-20 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-inner">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("partners.title")}
          </h3>
          <p className="text-base md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto text-center mb-10">
            {t("partners.description")}
          </p>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 items-center justify-center">
            {partners.map((partner: any, index: number) => (
              <div key={index} className="flex flex-col items-center justify-center p-4">
                <Image
                  src={partner.logo || "/placeholder.svg?height=80&width=150"}
                  alt={partner.name}
                  width={150}
                  height={80}
                  objectFit="contain"
                  className="mb-2"
                />
                <p className="text-sm font-medium text-gray-800 dark:text-gray-200">{partner.name}</p>
              </div>
            ))}
          </div>
        </section>

        {/* Development History Section */}
        <section className="container mx-auto px-4 py-12 md:py-20">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("history.title")}
          </h3>
          <div className="relative max-w-3xl mx-auto">
            <div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-blue-200 dark:bg-blue-700 hidden md:block"></div>
            {historyMilestones.map((milestone: any, index: number) => (
              <div
                key={index}
                className={`mb-8 flex items-center w-full ${index % 2 === 0 ? "md:flex-row-reverse" : "md:flex-row"}`}
              >
                <div className="w-full md:w-1/2 p-4">
                  <Card className="p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                    <CardTitle className="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-2">
                      {milestone.year}
                    </CardTitle>
                    <CardDescription className="text-gray-700 dark:text-gray-300">{milestone.event}</CardDescription>
                  </Card>
                </div>
                <div className="hidden md:block w-1/2 text-center">
                  <div className="w-4 h-4 bg-blue-600 dark:bg-blue-400 rounded-full absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Future Trends Section */}
        <section className="container mx-auto px-4 py-12 md:py-20 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-inner">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("futureTrends.title")}
          </h3>
          <p className="text-base md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto text-center">
            {t("futureTrends.description")}
          </p>
        </section>

        {/* National Policy Support Section */}
        <section className="container mx-auto px-4 py-12 md:py-20">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("policies.title")}
          </h3>
          <p className="text-base md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto text-center">
            {t("policies.description")}
          </p>
        </section>

        {/* Savings Calculator Section */}
        <section className="container mx-auto px-4 py-12 md:py-20 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-inner">
          <h3 className="text-3xl md:text-4xl font-bold text-center mb-10 text-blue-700 dark:text-blue-300">
            {t("savingsCalculator.title")}
          </h3>
          <Card className="max-w-md mx-auto p-6 shadow-lg">
            <CardDescription className="mb-4 text-center">{t("savingsCalculator.description")}</CardDescription>
            <div className="flex flex-col gap-4">
              <label htmlFor="monthly-bill" className="sr-only">
                {t("savingsCalculator.inputLabel")}
              </label>
              <Input
                id="monthly-bill"
                type="number"
                placeholder={t("savingsCalculator.placeholder")}
                className="w-full"
                value={monthlyBillInput}
                onChange={(e) => setMonthlyBillInput(e.target.value)}
              />
              <Button onClick={handleCalculateSavings} className="w-full">
                {t("savingsCalculator.buttonText")}
              </Button>
              {annualSavings !== null && (
                <p className="text-center text-lg font-semibold mt-4">
                  {t("savingsCalculator.resultPrefix")}
                  <span className="text-green-600 dark:text-green-400">{annualSavings.toFixed(2)}</span>
                  {t("savingsCalculator.resultSuffix")}
                </p>
              )}
              {error && <p className="text-center text-red-500 mt-2">{error}</p>}
            </div>
          </Card>
        </section>

        {/* Call to Action Section */}
        <section className="container mx-auto px-4 py-12 md:py-20 text-center">
          <h3 className="text-3xl md:text-4xl font-bold mb-6 text-blue-700 dark:text-blue-300">
            {t("callToAction.title")}
          </h3>
          <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-8">
            {t("callToAction.description")}
          </p>
          <Button size="lg" className="px-8 py-3 text-lg">
            {t("callToAction.buttonText")}
          </Button>
        </section>
      </main>

      <footer className="container mx-auto px-4 py-8 text-center text-gray-600 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 mt-12">
        <p>
          &copy; {new Date().getFullYear()} {t("footer.copyright")}
        </p>
      </footer>
    </div>
  )
}
